<template>
  <div class="rankings scrollbar" v-if="newList.length > 0">
    <div class="head">
      <h2 class="title">Rankings</h2>
    </div>
    <div class="main">
      <ul class="info-list" v-for="item of newList" :key="item.id">
        <h3 v-text="item.name"></h3>
        <list-template
          v-for="(val, idx) of item.bookList"
          :key="val.bookId"
          :diff="'home-rankings'"
          :item="val"
          :index="idx + 1"
        />
        <p class="more" @click="toMore(item.id)">More</p>
      </ul>
    </div>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  components: {
    listTemplate,
  },
  computed: {
    newList() {
      if (this.list) {
        return this.newSort(this.list);
      } else {
        return [];
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    newSort(arr) {
      return arr.sort(this.compareSort("sort"));
    },
    //   通过sort重新排序
    compareSort(key) {
      return function (value1, value2) {
        let val1 = value1[key];
        let val2 = value2[key];
        return val1 - val2;
      };
    },
    toMore(id) {
      this.$router.push({
        name: "rankingsView",
        params: { title: id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rankings {
  // padding-left: 40px;
  margin-bottom: 10px;
  .head {
    margin: 40px 0 19px 40px;
    .title {
      font-size: 34px;
      line-height: 48px;
      &::before {
        content: "";
        width: 8px;
        height: 30px;
        border-radius: 0px 4px 4px 0px;
        display: inline-block;
        margin-right: 10px;
        background: linear-gradient(147deg, #f56580 0%, #bd4ff0 100%);
      }
    }
  }
  .main {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    margin-left: 40px;
    .info-list {
      width: 504px;
      height: auto;
      border-radius: 16px;
      padding: 0 18px 0 16px;
      margin-right: 29px;
      display: flex;
      flex-direction: column;
      background: linear-gradient(319deg, #ffffff 0%, #ffe3e6 100%);
      > h3 {
        height: 33px;
        margin: 16px 0 32px 0;
        font-size: 24px;
        font-family: Arial-Black, Arial;
        font-weight: 900;
        display: flex;
        align-items: center;
      }
      .list-template {
        margin-bottom: 24px;
      }
      .more {
        margin: 24px 0;
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        color: #e86472;
      }
    }
  }
}
</style>
